import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
import { connect } from 'dva';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Icon,
  Button,
  Select,
  Modal,
  message,
  Spin,
  InputNumber,
} from 'antd';
import request from '@/utils/request';
import styles from '../styles.less';
import PubSub from 'pubsub-js';

const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const formItemLayoutText = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};

function AddCatalog(props) {
  const { getFieldDecorator } = props.form;
  const [spinning, setSpinning] = useState(false);
  // const [menuCode, setMenuCode] = useState('');
  // 校验组件编码格式

  useEffect(() => {
    if (props.catalogAddType === 'add') {
    } else if (props.catalogAddType === 'edit') {
      props.form.setFieldsValue({
        catalogId: props.selectCatalog.catalogId,
        catalogName: props.selectCatalog.catalogName,
        catalogDesc: props.selectCatalog.catalogDesc,
      });
    } else if (props.catalogAddType === 'addSon') {
      props.form.setFieldsValue({
        parCatalogId: props.selectCatalog.catalogId,
      });
    }
  }, [props.catalogAddType]);

  // 新增
  useImperativeHandle(props.cRef, () => ({
    handleAdd: () => {
      return new Promise(function(resolve) {
        props.form.validateFields((err, value) => {
          if (err) return;
          // 校验
          // let regk = '/^(' + menuCode + ')\\w+/';
          // let re = eval(regk);
          // if (!re.test(value.menuCode)) {
          //   Modal.error({
          //     content: `抱歉，你输入的菜单编码不正确，当前的编码类型为'${menuCode}'`,
          //   });
          //   return;
          // }

          setSpinning(true);

          if (props.catalogAddType === 'edit') {
            request('pmc/pcms/formCatalog/update', { data: value }).then(res => {
              if (res && res.success == true) {
                setSpinning(false);
                const dataList = res.data;
                const treeData = props.treeData;
                message.success('修改成功');
                PubSub.publish(`formManage_catalogInfo.update`, { dataList, treeData });
                resolve(true);
              } else {
                setSpinning(false);
                if (res && res.errMessage) {
                  message.error(res.errMessage);
                } else {
                  message.error('修改失败');
                }
              }
            });
          } else {
            request('pmc/pcms/formCatalog/add', { data: value }).then(res => {
              if (res && res.success == true) {
                setSpinning(false);
                const dataList = res.data;
                const treeData = props.treeData;
                message.success('新增成功');
                PubSub.publish(`formManage_catalogInfo.update`, { dataList, treeData });
                resolve(true);
              } else {
                setSpinning(false);
                if (res && res.errMessage) {
                  message.error(res.errMessage);
                } else {
                  message.error('新增失败');
                }
              }
            });
          }
        });
      });
    },
  }));

  return (
    <Spin spinning={spinning}>
      <Form>
        <Row>
          <Col span={24}>
            <Form.Item label="目录名称" {...formItemLayoutText}>
              {getFieldDecorator('catalogName', {
                rules: [
                  {
                    required: true,
                    message: '目录名称不能为空',
                  },
                ],
              })(<Input placeholder="请输入目录名称" maxLength={30} />)}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item label="目录描述" {...formItemLayoutText}>
              {getFieldDecorator('catalogDesc')(
                <TextArea rows={5} placeholder="请输入目录描述" maxLength={150} />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row style={{ display: 'none' }}>
          <Col span={1}>
            <Form.Item label="目录Id" {...formItemLayout}>
              {getFieldDecorator('catalogId')(<Input disabled={true} />)}
            </Form.Item>
          </Col>
          <Col span={1}>
            <Form.Item label="父级目录Id" {...formItemLayout}>
              {getFieldDecorator('parCatalogId')(<Input disabled={true} />)}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Spin>
  );
}

export default connect(({ formManage }) => ({
  treeData: formManage.treeData,
  selectCatalog: formManage.selectCatalog,
  catalogAddType: formManage.catalogAddType,
}))(Form.create()(AddCatalog));
